//注意点：gulpfile.js文件名称不能修改这是gulp规定的
//引入下载的gulp
const gulp = require('gulp')
//引入下载的打包html任务的包
const htmlmin = require('gulp-htmlmin')
//引入下载的打包css任务的包
const cssmin = require('gulp-cssmin')
//引入下载的打包sass任务的包，为了解决兼容问题
const sass = require('gulp-sass')(require('sass'))
//引入下载的打包js任务的包
const js = require('gulp-uglify')
//引入下载的删除任务
const del = require('del')
//引入下载的ES6转换ES6任务包
const babel = require('gulp-babel')
//引入自动打开浏览器任务包
const server = require('gulp-webserver')

//html任务处理
const htmlHandler = function () {
    //gulp.src()表示要打包那个文件
    return gulp.src('./src/**/*.html')
    //pipe() 管道函数
    .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
    }))
    //把代码进行压缩后放到那个文件夹里面去
    .pipe(gulp.dest('./dist'))
}
//css任务处理
const cssHandler = function () {
    return gulp.src('./src/sass/**')
    //先把sass代码转成css代码
    .pipe(sass())
    //把转成css的代码进行压缩处理
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))
}
//js任务处理
const jsHandler = function () {
    return gulp.src('./src/js/*.js')
    //把ES6转成ES5语法
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(js())
    .pipe(gulp.dest('./dist/js'))
}

//配置移动libs任务
const libsHandler = function () {
    return gulp.src('./src/libs/**')
    .pipe(gulp.dest('./dist/libs'))
}
//配置移动img任务
const imgHandler = function () {
    return gulp.src('./src/img/**')
    .pipe(gulp.dest('./dist/img'))
}
//执行删除任务
const delHandler = function () {
    //在执行其他任务之前，先把之前压缩的给你清除下
    return del(['./dist'])
}
//自动打开浏览器任务
const serverHandler = function () {
    return gulp.src('./dist')
    .pipe(server({
        host: '127.0.0.1',          // 配置打开浏览器的域名
        port: 2113,                 // 配置打开浏览器的端口号
        livereload: true,           // 自动刷新浏览器
        open: './index.html'  // 默认打开 dist 文件夹下的哪个文件
    }))
}
// 创建一个watchHandler任务
const watchHandler = function () {
    gulp.watch('./src/sass/**', cssHandler)
    gulp.watch('./src/js/**', jsHandler)
    gulp.watch('./src/**/*', htmlHandler)
    gulp.watch('./src/libs/**', libsHandler)
    gulp.watch('./src/img/**', imgHandler)
}

//同时执行所有的任务
// module.exports.default = gulp.parallel(htmlHandler, cssHandler, libsHandler, imgHandler)

//串行，一个一个执行
// module.exports.default = gulp.series(htmlHandler, cssHandler, libsHandler, imgHandler)

//串行和并行结合使用
module.exports.default = gulp.series(
    //先执行清除任务
    delHandler,
    //再同时执行其他的任务
    gulp.parallel(htmlHandler, jsHandler,cssHandler, libsHandler, imgHandler),
    gulp.parallel(serverHandler, watchHandler)
    
    //当所有的东西执行完毕后
    
)